<template>
  <div>
    <Quanju />
    <h1>-------------------------------------</h1>
    <div>1.v-model</div>
    <input type="text" v-model="text" />
    <p>{{ text }}</p>
    <h1>-------------------------------------</h1>
    <div>2.v-show</div>
    <button @click="fu()">点我显示</button>
    <button @click="fun()">点我隐藏</button>
    <div v-show="bool" class="box"></div>
    <h1>-------------------------------------</h1>
    <div>3.v-on</div>
    <button @click="fq()">点我显示内容</button>
    <h1>-------------------------------------</h1>
    <div>4.v-if全家桶</div>
    <input type="checkbox" name="" id="" v-model="bool" />
    <div v-if="bool">我是v-if</div>
    <div>5.v-else</div>
    <div v-if="bool">我在if------睡觉</div>
    <div @click="fr()" v-else>我是else===========上课</div>
    <h1>-------------------------------------</h1>
    <div>6.v-else-if</div>
    <input
      type="text"
      name=""
      id=""
      v-model="count"
      placeholder="只能写1-6任意数字"
    />
    <div v-if="count == 1">不将就</div>
    <div v-if="count == 2">不错</div>
    <div v-if="count == 3">不讲究</div>
    <div v-if="count == 4">真行</div>
    <div v-if="count == 5">康康</div>
    <div v-if="count == 6">真多</div>
    <h1>-------------------------------------</h1>
    <div>7.v-text和{{}}</div>
    <div>{{ neironga }}</div>
    <div v-text="neironga"></div>
    <h1>-------------------------------------</h1>
    <div>8计算属性-------computed</div>
    <h1>转成大写----------------{{ result }}</h1>
    <h1>转成小写----------------{{ result2 }}</h1>

    <h1>-------------------------------------</h1>
    <div>9.v-html 作用：就是把字符串标签插入页面进行展示</div>
    <div v-html="wenben"></div>
    <h1>-------------------------------------</h1>
    <div>10.v-once</div>
    <input type="text" v-model="conter" />
    <div v-once>{{ conter }}</div>
    <h1>-------------------------------------</h1>
    <div>11.watch监听</div>
    <input type="text" v-model="inputval" />
    <h1>-------------------------------------</h1>
    <div>12.事件对象$event</div>
    <button @click="ft($event)">点我触发事件</button>
    <h1>-------------------------------------</h1>
    <div>13.按键修饰符</div>
    <input type="text" v-on:keydown.space="fy()" />
    <p>{{ str }}</p>
    <h1>-------------------------------------</h1>
    <div>14.事件修饰符</div>
    <div>-----------stop-----------</div>
    <div class="big" @click="fa()">
      <div class="small" @click.stop="fb()"></div>
      <p>{{ bigbox }}</p>
      <p>{{ small }}</p>
    </div>
    <h1>-------------------------------------</h1>
    <div>15.传值</div>
    <br />
    <Fu />
    <Ge /><Di />
    <h1>-------------------------------------</h1>
    <div>16.ref获取dom操作</div>
    <input type="text" ref="refinput" />
    <button @click="fdd()">点我获取input值</button>
    {{ inputva }}
    <h1>-------------------------------------</h1>
    <div>17.router-link</div>
    <router-link to="/lll">详情</router-link>
    <h1>-------------------------------------</h1>
    <div>18.动态路由传参</div>
    <div>
      方式一params-------------发送this.$router.push({name:"你要跳转的路由规则的name",params:{你配置的接收参数:"数据"}})---------------接受
      this.$route.params.xxx
    </div>
    <div>
      方式二query---------------发送this.$router.push({name:"你要跳转的路由规则的name",query:{接收参数:"数据"}})-------------------------接受this.$route.query.xxx
    </div>

    <h1>-------------------------------------</h1>
    <div>19.生命周期钩子函数</div>
    <div>
      beforeCreate---准备创建 created ----创建完成 beforeMounte---准备渲染
      mounted----渲染完成 beforeUpdata----数据准备更新 updata-------数据更新完毕
      beforeDestory----准备销毁 Destoryed-----销毁完毕
    </div>
    <h1>-------------------------------------</h1>
    <div>20.$set解决Object.define.Proerty的问题</div>
    <br />
    <div>
      问题：在vue2.0中双向绑定使用的是数据劫持Object.defineProerty()
      但是**Object.defineProerty() 只会监听初始化的数据** 如果初始化完毕了
      数据在新增新的内容 Object.defineProerty() 就监听不到
      监听不到就没有数据劫持 没有数据劫持就没有双向绑定 所以
      数据变了视图也不会改变
    </div>
    <div>语法： this.$set("你要修改谁","你要新增的key"，“你要新增的val”)</div>
    <h1>-------------------------------------</h1>
    <div>21.路由守卫</div>
    <div>全局前置守卫</div>
    <div>语法router.beforeEach((to去哪里,from从哪里来,next下一步)=>{})</div>
    <div>全局后置守卫</div>
    <div>router.afterEach((to从哪来,from去哪里)=>{})</div>
    <div>路由独享守卫--beforeEnter</div>
    <div>
      beforeEnter(to,from,next){} router下的index.js中
      钩子函数写在指定你要设置守卫的路由配置中 与path name component同级
    </div>
    <h1>-------------------------------------</h1>
    <div>22.过滤器</div>
    <div>全局过滤器---filter</div>
    <div>
      局部过滤器---filters <br />
      语法：filterse：{过滤器的名字（你要操作的数据）{return你的逻辑}}
    </div>
    <h1>-------------------------------------</h1>
    <div>24.keep-alive</div>
    <div>keep-alive属性----include----exclude</div>
    <div>keep-alive的钩子函数----activated---deactivated</div>
    <h1>-------------------------------------</h1>
    <div>25.自定义指令</div>
    <div>
      语法：directives：{ 自定义指令的名字：{
      自定义的钩子函数（el你绑定的自定义指令所在的dome元素）{ 你的操作逻辑 } } }
    </div>
    <h1>-------------------------------------</h1>
    <div>26.自定义指令钩子函数</div>
    <div>bind---绑定到指定元素上只执行一次</div>
    <div>inserted----绑定了指令的元素在插入页面展示的时候调用</div>
    <div>update----所有节点更新的时候调用</div>
    <div>
      componentUpdate------指令所在的组件的节点以及他自己所有的子节点全部更新在调用
    </div>
    <div>unbind-----------触发指令和元素的绑定时候调用 只执行一次</div>
  </div>
</template>

<script>
import Ge from "@/views/tongbaochaunzhi/ge.vue";
import Di from "@/views/tongbaochaunzhi/di.vue";
import Fu from "./fu.vue";
export default {
  data() {
    return {
      text: "",
      bool: false,
      count: "",
      wenben: "<s>我是文本</s>",
      neironga:
        "区别:v-text:可以解决屏幕闪烁,{{}}模板插值不能用户访问时网络不好就会显示出来花括号",
      conter: "sdfghjkl",
      inputval: "",
      str: "",
      big: "",
      small: "",
      inputva: "",
      text2: "gdewSDSSGF",
    };
  },
  components: {
    Fu,
    Ge,
    Di,
  },
  watch: {
    inputval(olddata, newdata) {
      alert(olddata + "====================" + newdata);
    },
  },
  methods: {
    fun() {
      this.bool = false;
    },
    fu() {
      this.bool = true;
    },
    fq() {
      alert("得一生");
    },
    fr() {
      this.bool = true;
    },
    ft(pig) {
      console.log(pig.target);
    },
    fy() {
      // console.log("空格被按下");
      this.str = "空格被按下了";
    },
    fa() {
      this.big = "我是大盒子";
    },
    fb() {
      this.small = "我是小盒子";
    },
    fdd() {
      // this.$refs.refinput.value=this.inputval
      // console.log(this.$refs.refinput.value);
      this.inputva = this.$refs.refinput.value;
    },
  },
  computed: {
    result() {
      return this.text2.toUpperCase();
    },
    result2() {
      return this.text2.toLowerCase();
    },
  },
};
</script>

<style scoped>
.box {
  width: 0.4rem;
  height: 0.4rem;
  background: pink;
}
.big {
  width: 100px;
  height: 100px;
  background: blueviolet;
}
.small {
  width: 0.5rem;
  height: 0.5rem;
  background: yellow;
}
</style>